<div class="flex justify-center w-full max-h-full h-full overflow-y-auto">
  <div class="grow shrink-0 h-full max-w-[960px] overflow-y-auto px-14 sm:px-16">
    <div class="mx-auto max-w-[640px]">
      <div class="pt-10">
        <div class="mb-1 text-xl leading-[22px] font-semibold text-text-primary">
          🎉 {{ 'PAC.Knowledgebase.DocumentUploaded' | translate: {Default: 'Document uploaded'} }}
        </div>
        <div class="mb-7 text-[13px] leading-4 text-text-tertiary">
          {{ 'PAC.Knowledgebase.DocumentUploadedKB' | translate: {Default: 'Documents have been uploaded to the knowledgebase:'} }}
          {{knowledgebase().name}}
          {{ 'PAC.Knowledgebase.YouFindItIn' | translate: {Default: ', you can find it in the document list of the knowledgebase.'} }}
        </div>
      </div>
      <div class="h-5 flex items-center mb-3">
        <div class="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
          @if (running()) {
            <button type="button" class="btn btn-small pressable danger w-7 h-7 justify-center mr-1"
              [matTooltip]="'PAC.Knowledgebase.StopEmbed' | translate: {Default: 'Terminate embedding and start from scratch if you need to embed again'}"
              matTooltipPosition="above"
              (click)="stopJob()" >
              <i class="ri-stop-circle-line text-lg"></i>
            </button>
            {{ 'PAC.Knowledgebase.Embedding' | translate: {Default: 'Embedding'} }}...
          } @else if (cancel()) {
            {{ 'PAC.Knowledgebase.EmbedCancelled' | translate: {Default: 'Embed Cancelled'} }}
          }
          @else {
            {{ 'PAC.Knowledgebase.EmbedCompleted' | translate: {Default: 'Embed Completed'} }}
          }
        </div>
      </div>
      <div class="flex flex-col gap-0.5 pb-2">
        @for (item of documents(); track item.id) {
          <div class="relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden">
            <div class="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
              <knowledge-doc-id [doc]="item" class="grow text-text-secondary" />

              @if (item.status === 'running') {
                <i class="ri-loader-2-line flex justify-center items-center w-3.5 h-3.5 animate-spin"></i>
              } @else if (item.status === 'finish') {
                <i class="ri-checkbox-circle-fill text-text-success"></i>
              } @else if (item.status === 'error') {
                <i class="ri-close-circle-fill text-text-waring"
                  [matTooltip]="item.processMsg"
                ></i>
              }
            </div>

            @if (item.status === 'running') {
              <mat-progress-bar class="absolute bottom-0 left-0 w-full" mode="determinate" [value]="item.progress" [color]="item.progress === 100 ? 'primary' : 'accent'" />
            }
          </div>
        }
      </div>
      <hr class="my-3 h-[1px] bg-divider-subtle border-0" />
      <div class="flex flex-col gap-1">
        <div class="flex items-center gap-1 py-0.5 min-h-5 text-sm">
          <div class="w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0">
            {{ 'PAC.Knowledgebase.ChunkMode' | translate: {Default: 'Chunk Mode'} }}
          </div>
          <div class="grow flex items-center gap-1 text-text-secondary">
            @if (chunkModeStandard()) {
              {{ 'PAC.Knowledgebase.ChunkModeStandard' | translate: {Default: 'Standard'} }}
            } @else {
              {{ 'PAC.Knowledgebase.ChunkModeCustom' | translate: {Default: 'Custom'} }}
            }
          </div>
        </div>

        <div class="flex items-center gap-1 py-0.5 min-h-5 text-sm">
          <div class="w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0">
            {{ 'PAC.Knowledgebase.ChunkDelimiter' | translate: {Default: 'Delimiter'} }}
          </div>
          <div class="grow flex items-center gap-1 text-text-secondary">
            {{ parserConfig()?.delimiter }}
          </div>
        </div>
        <div class="flex items-center gap-1 py-0.5 min-h-5 text-sm">
          <div class="w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0">
            {{ 'PAC.Knowledgebase.ChunkSize' | translate: {Default: 'Chunk Size'} }}
          </div>
          <div class="grow flex items-center gap-1 text-text-secondary">
            {{ parserConfig()?.chunkSize }}
          </div>
        </div>
        <div class="flex items-center gap-1 py-0.5 min-h-5 text-sm">
          <div class="w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0">
            {{ 'PAC.Knowledgebase.ChunkOverlap' | translate: {Default: 'Chunk Overlap'} }}
          </div>
          <div class="grow flex items-center gap-1 text-text-secondary">
            {{ parserConfig()?.chunkOverlap }}
          </div>
        </div>

        <div class="flex gap-1 py-0.5 min-h-5 text-sm !items-start pt-1">
          <div class="w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0">
            {{ 'PAC.Knowledgebase.TextPreprocessingRules' | translate: {Default: 'Text preprocessing rules'} }}
          </div>
          <div class="grow flex items-center gap-1 text-text-secondary">
            @if (parserConfig()?.replaceWhitespace) {
              <span>{{ 'PAC.Knowledgebase.ReplaceWhiteChar' | translate: {Default: 'Replace consecutive spaces, newlines, and tabs'} }}. </span>
            }
            @if (parserConfig()?.removeSensitive) {
              <span>{{ 'PAC.Knowledgebase.RemoveEmailUrls' | translate: {Default: 'Remove all URLs and email addresses'} }}</span>
            }
          </div>
        </div>
      </div>
      <div class="flex items-center gap-2 my-10">
        <!-- <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium w-fit">
          <i class="ri-terminal-box-line"></i>
          <span>Access the API</span></button
        > -->
        <button type="button" class="btn disabled:btn-disabled btn-primary btn-medium w-fit"
          (click)="apply()">
          <span>{{'PAC.Knowledgebase.GotoDocuments' | translate: {Default: 'Goto documents'} }}</span>
          <i class="ri-arrow-right-line"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="shrink-0 pt-[88px] pr-8 text-sm">
    <div class="flex flex-col gap-3 w-[328px] p-6 text-text-tertiary bg-gray-50 rounded-xl">
      <div class="flex justify-center items-center w-10 h-10 bg-components-card-bg rounded-[10px] shadow-lg">
        <i class="ri-book-open-line text-xl text-purple-500"></i>
      </div>
      <div class="text-base font-semibold text-text-secondary">
        {{ 'PAC.Knowledgebase.WhatDoNext' | translate: {Default: 'What to do next'} }}
      </div>
      <div class="text-text-tertiary">
        {{ 'PAC.Knowledgebase.DoNextDesc' | translate: {Default: 'Once the documents have been embedded, the knowledgebase can be added to the digital expert agents for use as context.'} }}
      </div>
      <div class="w-full flex justify-end pt-2">
        <a class="group flex items-center gap-2 text-sm font-light text-text-primary transition-all duration-100 hover:text-primary-500"
          [href]="'/xpert/w/'+workspaceId()" target="_blank">
          {{ 'PAC.Knowledgebase.GotoWorkspace' | translate: {Default: 'Goto workspace'} }}
          <i class="ri-external-link-line transition-all group-hover:translate-x-1"></i>
        </a>
      </div>
    </div>
  </div>
</div>